<template>
  <PageContainer>
    <div class="header">头部</div>
    <div class="content" :ref="(el) => store.contentRef = el as HTMLDivElement">
      <div class="debug-info">
        <div>软键盘弹起：{{ isKeyboardVisible }}</div>
      </div>
      内容<br />可滚动区域<br />
      <div v-for="i in 50" :key="i">测试行 {{ i }}</div>
      <div>软键盘弹起：{{ isKeyboardVisible }}</div>
      <div v-for="(message, index) in messages" :key="index" class="message-item">
        {{ message }}
      </div>
    </div>

    <Footer @send="store.handleSend" />
  </PageContainer>
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia'
import PageContainer from '@/components/PageContainer/index.vue'
import Footer from './footer.vue'
import { useTestH5Store } from '@/stores/testH5'
import { useMobileFooterFixed } from '@/hooks/useMobileFooterFixed'

const store = useTestH5Store()
const { messages } = storeToRefs(store)
const { isKeyboardVisible } = useMobileFooterFixed()
</script>

<style scoped lang="scss">
.header {
  height: 100px;
  background-color: red;
  flex-shrink: 0;
}

.content {
  flex: 1;
  overflow-y: auto;
  padding: 15px;
  background-color: rgb(226, 226, 21);
  min-height: 0;
}

.debug-info {
  background-color: rgba(0, 0, 0, 0.1);
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 4px;
  font-size: 12px;
}

.message-item {
  padding: 8px 12px;
  margin: 8px 0;
  background-color: #fff;
  border-radius: 8px;
  word-break: break-word;
}
</style>